<template>
	<view v-if="myInfo==''">
		<xbd-zwnz marginTop='200'></xbd-zwnz>
	</view>
	<view v-else class="detail-page">
		<view class="title">
			<view class="left">

			</view>
			<view class="">
				{{myInfo.case_name}}
			</view>
		</view>

		<view class="center">
			<!-- 案件受理 -->
			<xbd-page-card>
				<template>
					<xbd-image-title title="案件受理">
					</xbd-image-title>
					<image v-if="myInfo.avatar" class="avatar" :src="myInfo.avatar"></image>
					<image v-els class="avatar" src="@/static/image/avatar.png"></image>
					<view class="tag">
						<view class="left">姓名</view>
						<view class="right">{{myInfo.accept_person||'-'}}</view>
					</view>
					<view class="tag">
						<view class="left">岗位</view>
						<view class="right">{{myInfo.job||'-'}}</view>
					</view>
					<view class="tag">
						<view class="left">工号</view>
						<view class="right">{{myInfo.code || '-'}}</view>
					</view>
					<view class="tag">
						<view class="left">所属部门</view>
						<view class="right">{{myInfo.department||'-'}}</view>
					</view>
					<view class="tag">
						<view class="left">创建时间</view>
						<view class="right">{{myInfo.created_at | timeFormat('YYYY-MM-DD HH:mm') ||'-'}}</view>
					</view>
				</template>
			</xbd-page-card>

			<!-- 案件处置 -->
			<xbd-page-card>
				<template>
					<view class="">
						<xbd-image-title title="案件处置">
							<template>
								<view class="card-right">
									<view class="image">
										<image src="@/static/image/garden1.png"></image>
										进行中
									</view>
									<view class="image">
										<image src="@/static/image/garden3.png"></image>
										已完成
									</view>
									<view class="image">
										<image src="@/static/image/garden2.png"></image>
										未开始
									</view>
								</view>

							</template>
						</xbd-image-title>
							<xbd-process-card v-for="(item,index) in myInfo.case_process" :key='index' :myinfo="item" :farId="id" :inx="index" :length="myInfo.case_process.length"></xbd-process-card>
					</view>
				</template>
			</xbd-page-card>
		</view>

	</view>
</template>

<script>
	import {
		Supervision
	} from '@/api/index.js';
	export default {
		components: {},
		data() {
			return {
				id: '',
				myInfo: ''
			};
		},
		methods: {
			async init() {
				const res = await Supervision.getCaseDetail(this.id)
				if(res.success){
					this.myInfo = res.data
				}else{
					this.$showToast(res.msg);
				}
				console.log(res)
			}
		},
		onLoad(res) {
			this.id = res.id
			this.init()
			uni.$on('upLoad', this.init)
		},
		onUnload() {
			uni.$off('update');
		},
	}
</script>

<style lang="scss">
	.detail-page {
		.center {
			padding: 32rpx;
			position: relative;

			.avatar {
				position: absolute;
				top: 120rpx;
				right: 66rpx;
				width: 160rpx;
				height: 160rpx;
			}

			.tag {
				display: flex;
				align-items: center;
				margin-top: 30rpx;

				.right {
					font-weight: 400;
					font-size: 30rpx;
					color: #000623;
				}

				.left {
					width: 120rpx;
					font-size: 28rpx;
					color: #A0A7B8;
					margin-right: 40rpx;
				}

				&:nth-last-child(1) {
					margin-bottom: 30rpx;
				}
			}
		}

		.title {
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: 800;

			.left {
				width: 10rpx;
				height: 28rpx;
				background-color: #2E73FC;
				border-top-right-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				margin-right: 24rpx;
			}
		}

		.card-right {
			display: flex;
		}

		.image {
			font-size: 26rpx;
			color: #8890A5;
			margin-right: 20rpx;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}

		}
	}
</style>
